<template>
   <div class="order-manage">
     <div class="box-top">
    <el-form class="order-manage-query" :model="searchform">
      <el-form-item label="账号">
          <el-input clearable placeholder="请输入账号" v-model="searchform.account"></el-input>
      </el-form-item>
      <el-form-item label="提款状态">
        <el-select clearable v-model="searchform.status" placeholder="请选择提款状态">
          <el-option label="提现成功" :value="1"></el-option>
          <el-option label="提现失败" :value="2"></el-option>
          <el-option label="处理中" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建日期">
        <el-date-picker
          class="date-picker"
          v-model="searchform.time"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <div class="btn-box">
        <el-button class="search-btn" type="primary" @click="handleSearch">查询</el-button>
        <el-button class="search-btn" plain @click="handleReset">重置</el-button>
      </div>
   </el-form>
     </div>
     <div class="box-mid">
       <el-button @click="handleExport">导出</el-button>
     </div>
    <el-table v-loading="loading" class="res-manage-table" :data="tableData" border>
      <el-table-column show-overflow-tooltip align="center" v-for="(item, index) in tableList" :key="index" :prop="item.value?item.value:'暂无'" :label="item.label">
        <template slot-scope="scope">
          <span v-text="scope.row[item.value]?scope.row[item.value]:'暂无'"></span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.status !=='审核中'" @click="updateData(scope.row, 1)" type="text">通过</el-button>
          <el-button :disabled="scope.row.status !=='审核中'" @click="updateData(scope.row, 2)" type="text">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="box-pagenation">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      loading: false,
      searchform: {
        account: '',
        time: ['', ''],
        status: ''
      },
      tableData: [],
      tableList: [
        { value: 'withdraw_id', label: '订单编号' },
        { value: 'nickname', label: '账户' },
        { value: 'money', label: '金额' },
        { value: 'bank_name', label: '提款银行' },
        { value: 'card_no', label: '银行卡号' },
        { value: 'bank_info', label: '银行信息' },
        { value: 'create_time', label: '申请时间' },
        { value: 'modify_time', label: '结束时间' },
        { value: 'status', label: '状态' }
      ],
      currentPage: 1, // 当前页
      total: 0,
      pageSize: 10
    }
  },
  created () {
    this.getData()
  },
  watch: {

  },
  methods: {
    ...mapActions({
      getDraw: 'drawManage/getDraw',
      updataDraw: 'drawManage/updataDraw'
    }),
    handleExport () {
      const { time, account, status } = this.searchform
      let params = {
        start_time: time[0],
        end_time: time[1],
        status,
        account,
        page: this.currentPage,
        pageSize: this.pageSize,
        type: 4
      }
      window.location.href = `${window.location.origin}/app/admin/download/download-l?${this.$pars(params)}`
    },
    handleReset () { // 重置
      this.searchform = {
        account: '',
        time: ['', ''],
        status: ''
      }
      this.getData()
    },
    handleSearch () {
      this.currentPage = 1
      this.getData()
    },
    getData () {
      const { time, account, status } = this.searchform
      let params = {
        start_time: time[0],
        end_time: time[1],
        status,
        account,
        page: this.currentPage,
        pageSize: this.pageSize
      }
      this.loading = true
      this.getDraw(params).then(res => {
        this.tableData = res.items
        this.total = res.count
      }).finally(() => {
        this.loading = false
      })
    },
    updateData (row, status) {
      this.$confirm('确定后状态不可逆, 是否继续?', '提示', {
        confirmButtonText: ' 确定 ',
        cancelButtonText: ' 取消 ',
        type: 'warning'
      })
        .then(() => {
          let params = {
            status: status,
            withdraw_id: row.withdraw_id
          }
          this.updataDraw(params).then(res => {
            this.getData()
          })
        })
        .catch(() => {
        })
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getData()
    }
  }
}
</script>
<style lang="less">
  .order-manage {
    .text-area-nopass {
      width: 80%;
      margin-top: 20px;
    }
    .nopass-reason {
      margin-top: 0;
    }
    .img {
      width: 100%;
      height: 80px;
      border: none;
    }
    .pic {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }
    .btn-box {
      display: flex;
      float: left;
      padding-bottom: 20px;
    }
    .search-btn {
      float: left;
    }
    .more-con p {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .more-left {
      justify-content: flex-start !important;
    }
    .more-item {
      white-space: nowrap;
      width: 50%;
    }
    .review-box {
      text-align: center;
    }
    .action-bar {
      width: 100%;
      height: 44px;
      display: flex;
      align-items: center;
      font-size: 12px;
      span {
        color: #606266;
        cursor: pointer;
        display: flex;
        align-items: center;
      }
      i {
        font-size: 18px;
        margin-right: 5px;
      }
    }
    .date-picker {
      width: 400px;
    }
    .el-pagination {
      margin: 15px;
      text-align: center;
    }
    .btn {
      width: initial !important;
    }
    .order-manage-query {
      padding-top: 15px;
      .el-form-item {
        float: left;
        margin-right: 15px;
        margin-bottom: 15px;
      }
      .el-form-item:last-child {
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
      .el-input {
        width: 180px;
      }
    }
  }
</style>
